<template>
	<view class="search_container">
		<!-- 标题栏 -->
		<view class="custom-navigation-bar">

		</view>
		<view class="search_wrap">
			<!-- 搜索框 -->
			<view class="search_search flex align-center">
				<view @click="toIndex">
					<u-icon name="arrow-left" size="50"></u-icon>
				</view>
				<view class="ml30">
					<u-search shape="square" searchIconSize="32" :showAction="true" actionText="取消" :animation="false"
						v-model="text" @custom='noneClick' @search="toSearch"></u-search>
				</view>
			</view>

			<!-- 搜索结果 -->
			<view class="search_results" v-if="showSearchResults">
				<view class="results_tab">
					<u-tabs :active="currIndex" :list="tabList" lineColor="#459BF8" lineWidth="60rpx" lineHeight="8rpx"
						@change="change" :scrollable="false" :activeStyle="{color:'#459BF8',fontSize: '30rpx'}"
						:inactiveStyle="{color:'#333',fontSize: '30rpx'}"></u-tabs>
				</view>
				<!-- 全部 -->
				<view class="" v-if="currIndex==0">

				</view>
				<!-- 活动 -->
				<view class="" v-if="currIndex==1">

				</view>
				<!-- 服务 -->
				<view class="" v-if="currIndex==2">

				</view>
				<!-- 用户故事 -->
				<view class="" v-if="currIndex==3">

				</view>
			</view>

			<!-- 搜索时 -->
			<view v-else>
				<!-- 记录 -->
				<view class="mt50 flex flex-between mlr10">
					<view class="flex">
						<u-icon name="clock"></u-icon>
						<view class="ml30">
							哪里可以维修自行车
						</view>
					</view>
					<view class="">
						<u-icon name="close-circle"></u-icon>
					</view>
				</view>
				<!-- 清空 -->
				<view class="flex flex-end mt20">
					<u-icon name="trash" size="35"></u-icon>
					<view class="ml10">
						清空
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				showSearchResults: false,
				// 是否显示搜索结果页面
				tabList: [{
					name: '全部',
				}, {
					name: '活动',
				}, {
					name: '服务',
				}, {
					name: '用户故事',
				}],
				currIndex: 0,
				//选中的下标
			}
		},
		methods: {
			// 跳转到首页
			toIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				});
				this.showSearchResults = false; // 隐藏搜索结果页面
			},
			// 右侧控件
			noneClick() {
				this.text = ''
			},
			//确定搜索
			toSearch() {
				this.showSearchResults = true; // 显示搜索结果页面
			},
			//处理下标切换
			change(current) {
				this.currIndex = current.index
				console.log(current.index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search_container {
		.custom-navigation-bar {
			height: 170rpx;
		}

		.search_wrap {
			width: 90%;
			margin: 0 auto;

			.search_search {
				/deep/ .u-search__content {
					width: 470rpx;
					height: 60rpx;
				}
			}

			.search_results {
				.results_tab {
					/deep/ .u-tabs__wrapper__nav {
						justify-content: space-between;
					}
				}
			}

		}
	}
</style>